約 4,483,353 件
https://w.atwiki.jp/nicepaper/pages/18.html
このページではJavaScript（主にJquery）の使い方について説明していきます。 JavaScript入門 jQueryの読み込み jQueryを学ぶ1 jQueryを学ぶ2 jQueryを学ぶ3 jQueryを学ぶ4 jQueryで日付入力フォームを作る jQueryで複数の画像を切り替える jQueryでWEBページ全体をフェードインさせる。 jQueryで画像のスライドショーを実装する jQueryでタブコンテンツを作ってみる。 jQueryですべて表示（全部表示）と個別表示のタブ的なメニューを作る jQuery3.0登場 jQueryとCSSで上へ戻るボタンを作る jQueryで横並びメニューのドロップダウン型メニューを作る カレンダーから日付を入力する方法 Java ScriptのOnclick JavaScript入門 JavaScript入門1 Javascript入門2 JavaScript入門3 JavaScript入門4 JavaScript入門5 JavaScript入門6 JavaScript入門7 JavaScript入門8
https://w.atwiki.jp/aru_notebook/pages/16.html
JavaScript例文辞典 http //www.openspc2.org/reibun/javascript/
https://w.atwiki.jp/aias-jsstyleguide2/pages/15.html
JavaScriptのスタイルに関するルール 各項目の左側にある三角ボタンで、詳細情報の表示・非表示を切り替えられます。また下のボタンを使うと全項目を一度に変更することができます。 全て切り替える 命名規則 原則として、関数はfunctionNamesLikeThis、変数はvariableNamesLikeThis、クラスはClassNamesLikeThis、列挙型はEnumNamesLikeThis、メソッドはmethodNamesLikeThis、定数はCONSTANT_VALUES_LIKE_THIS、名前空間はfoo.namespaceNamesLikeThis.bar、ファイルはfilenameslikethis.jsのように、それぞれ命名してください。 プロパティとメソッド private なプロパティ、メソッドには名前の末尾にアンダースコアをつけてください。 protected なプロパティ、メソッドには（publicと同様に）末尾にアンダースコアをつけません。 private と protected に関するより詳しい情報は、「可視性」の項を参照してください。 メソッドと関数のパラメータ 省略可能な関数の引数は名前の先頭をopt_としてください。 関数の引数の個数が可変である場合、最後の引数名はvar_argsとすべきです。ただしコード内ではvar_argsを参照するのではなく、argumentsオブジェクトを使って下さい。 @paramアノテーションによっても、省略可能な引数や個数の変化する引数を定義できます。Compilerは変数名とアノテーションのどちらの記法も受け入れますが、両者を共に使うのが好ましいやり方です。 GetterとSetter EcmaScript5では、プロパティに対するgetterとsetterは推奨されません。もし使うのなら、getterが監視中のプロパティの状態を変更しないようにしなければなりません。 /** * 間違い -- こうしてはいけません。 */ var foo = { get next() { return this.nextId++; } }; アクセサ関数 プロパティに対するgetterとsetterは必須ではありません。ただしそれを使う場合、getterは必ずgetFoo()、setterは必ずsetFoo(value)のように命名してください。（論理値を返すgetterであれば、isFoo()としてもかまいません。たいていはその方が自然です。） 名前空間 JavaScript自体は、パッケージや名前空間の仕組みをサポートしていません。 グローバル名の衝突はデバックが難しく、また２つのプロジェクトを統合するようなケースでは、手に負えない大きな問題となる可能性もあります。JavaSriptコードの共有を可能にするには、衝突を防ぐための約束事に従う必要があります。 グローバルコードには名前空間を適用する グローバルスコープに存在するコードは 必ず 、プロジェクトやライブラリと関連付けられた一意のプリフィックスをもつ擬似的な名前空間に属しているものとします。もしプロジェクト名が "Project Sloth" であれば、擬似的な名前空間名はsloth.*とするのがよいでしょう var sloth = {}; sloth.sleep = function() { ... }; Closure LibraryやDojo Toolkitを含む多くのライブラリは、名前空間を宣言するための高位の関数が提供されています。名前空間の宣言方法には一貫性を持たせてください goog.provide( sloth ); sloth.sleep = function() { ... }; 名前空間の所有権を尊重する ある名前空間の下位の名前空間で何かをする場合は、必ず親の名前空間の所有者にそのことを知らせてください。もしあなたがslothの下にhatsを作ろうとしているのであれば、Slothチームはあなたが使うsloth.hatsのことを必ず知っていなければなりません。 外部コードと内部コードでは異なる名前空間を使う 「外部コード」とは、あなたのコードベースの外部にあり、独立してコンパイルされた全てのコードのことです。外部コードと内部コードで使われている名前は、厳格に分離されなければなりません。もしあなたがfoo.hats.*という名前で提供される外部ライブラリを使っているのなら、内部コードはfoo.hats.*にいかなるシンボルも定義してはいけません。ライブラリの提供元が新しいシンボルを定義すると、そのコードは動作しなくなるおそれがあるからです foo.require( foo.hats ); /** * 間違い -- こうしてはいけません。 * @constructor * @extends {foo.hats.RoundHat} */ foo.hats.BowlerHat = function() { }; どうしても外部コードの名前空間に新しいAPIを追加する必要がある場合は、そのAPI関数だけを明示的にエクスポートしてください。ただしそうであっても、一貫性を保ち、Compilerがより効果的に最適化を行えるようにするため、内部コードは内部の名前で内部のAPIを呼び出すようにすべきです。 foo.provide( googleyhats.BowlerHat ); foo.require( foo.hats ); /** * @constructor * @extends {foo.hats.RoundHat} */ googleyhats.BowlerHat = function() { ... }; goog.exportSymbol( foo.hats.BowlerHat , googleyhats.BowlerHat); 可読性を上げるため長い名前に別名を付ける もしそうすることで可読性が向上するなら、完全な型名に対しローカルの別名を付けましょう。ローカル名は型の一番最後の部分にマッチするようにしてください /** * @constructor */ some.long.namespace.MyClass = function() { }; /** * @param {some.long.namespace.MyClass} a */ some.long.namespace.MyClass.staticHelper = function(a) { ... }; myapp.main = function() { var MyClass = some.long.namespace.MyClass; var staticHelper = some.long.namespace.MyClass.staticHelper; staticHelper(new MyClass()); }; 名前空間にローカルの別名をつけてはいけません。名前空間への別名付けにはgoog.scopeを使いましょう。 myapp.main = function() { var namespace = some.long.namespace; namespace.MyClass.staticHelper(new namespace.MyClass()); }; プロパティが列挙型である場合を除き、別名のプロパティ（やその他のメンバ）へのアクセスは避けて下さい /** @enum {string} */ some.long.namespace.Fruit = { APPLE a , BANANA b }; myapp.main = function() { var Fruit = some.long.namespace.Fruit; switch (fruit) { case Fruit.APPLE ... case Fruit.BANANA ... } }; myapp.main = function() { var MyClass = some.long.namespace.MyClass; MyClass.staticHelper(null); }; グローバルスコープでの別名の作成は絶対にしないでください。別名は関数ブロックの中でのみ使用可能とします。 ファイル名の命名規則 大文字小文字を区別するプラットフォームで混乱が生じることを避けるため、ファイル名には小文字のみを使って下さい。ファイル名は.jsで終わらねばならず、-と_以外の区切り文字を含んではいけません（より好ましいのは_より-の方です）。 独自のtoString()メソッド 副作用なしで常に成功すること。 独自のtoString()メソッドを定義することで、オブジェクトが自分自身を文字列化（string-ify）する方法を制御できます。それ自体はよいのですが、そのときメソッドは以下の点を保証していなければなりません。(1) 常に成功すること、(2)他の部分に影響を与えないこと。この基準を満たしていない場合、容易に深刻な問題が引き起こされることでしょう。例えばtoString()メソッドが内部でassert関数を呼び出しているとします。assertは処理が失敗した場合にオブジェクト名を出力しようとしますが、その時に呼び出すのはもちろんtoString()メソッドです。 変数初期化の遅延 OK。 変数は、宣言された時点で常に初期化が可能とは限りません。従って初期化の遅延は当然ありうることです。 明示的なスコープ 常にそうしてください。 常に明示的なスコープを使用し、移植性と明瞭さを向上させてください。例えば関数を作るとき、スコープチェーンの中にwindowがあることを仮定しないでください。いつかwindowがコンテントウィンドウを指していない別のアプリケーションでそれを使いたくなるかもしれません。 コードのフォーマット 詳しい情報を見るには開いてください。 基本的な考え方は C++ formatting rules に従い、さらに以下に説明する内容が追加されます。 波括弧 セミコロンの暗黙的な挿入を考慮し、波括弧を開くときはそれまでと同じ行で始めてください。例えばこのようにします if (something) { // ... } else { // ... } 配列とオブジェクトの初期化 きれいに収まるようなら、配列やオブジェクトの初期化を1行で行ってもかまいません var arr = [1, 2, 3]; // [の後と]の前にスペースを入れないでください。 var obj = {a 1, b 2, c 3}; // {の後と}の前にスペースを入れないでください。 配列とオブジェクトの初期化が複数行にわたる場合は、ブロックと同様、括弧を変数と同じ行に置き、スペース2つ分インデントしてください // オブジェクトの初期化 var inset = { top 10, right 20, bottom 15, left 12 }; // 配列の初期化 this.rows_ = [ "Slartibartfast" fjordmaster@magrathea.com , "Zaphod Beeblebrox" theprez@universe.gov , "Ford Prefect" ford@theguide.com , "Arthur Dent" has.no.tea@gmail.com , "Marvin the Paranoid Android" marv@googlemail.com , the.mice@magrathea.com ]; // メソッド呼び出しの中で使う例。 goog.dom.createDom(goog.dom.TagName.DIV, { id foo , className some-css-class , style display none }, Hello, world! ); 初期化リストの中で長い識別子や値の位置を揃えるのはやっかいな問題です。むしろ常に位置を揃えない方がよいでしょう。例えばこのようにします CORRECT_Object.prototype = { a 0, b 1, lengthyName 2 }; 下のようにはしません WRONG_Object.prototype = { a 0, b 1, lengthyName 2 }; 関数の引数 可能であれば、関数の引数リストは全て同じ行に書かれるべきです。もしそうすることで80文字の制限を超えてしまう場合、引数は読みやすい形式で改行されなくてはなりません。可能な限り80文字に近づけてスペースを節約するか、または引数ごとに改行を行って可読性を高めます。インデントはスペース4つ分、もしくは丸括弧で位置を揃えます。以下に示す例は引数を改行する際の最も一般的なパターンです // スペース4つ分インデントし、80文字で折り返します。関数名がとても長い場合に使います。 // 関数名が変わったときにインデントを修正する必要がなく、場所もあまりとりません。 goog.foo.bar.doThingThatIsVeryDifficultToExplain = function( veryDescriptiveArgumentNumberOne, veryDescriptiveArgumentTwo, tableModelEventHandlerProxy, artichokeDescriptorAdapterIterator) { // ... }; // スペース4つ分インデントし、各行に1つずつ引数を書きます。関数名が長い場合に使います。 // 関数名の変更の影響を受けず、また個々の引数を目立たせることができます。 goog.foo.bar.doThingThatIsVeryDifficultToExplain = function( veryDescriptiveArgumentNumberOne, veryDescriptiveArgumentTwo, tableModelEventHandlerProxy, artichokeDescriptorAdapterIterator) { // ... }; // 丸括弧に揃えてインデントし、80文字で折り返します。視覚的に引数をグループ化でき、 // かつスペースも少なくてすみます。 function foo(veryDescriptiveArgumentNumberOne, veryDescriptiveArgumentTwo, tableModelEventHandlerProxy, artichokeDescriptorAdapterIterator) { // ... } // 丸括弧に揃えてインデントし、各行に1つずつ引数を書きます。 // 個々の引数を目立たせることができます。 function bar(veryDescriptiveArgumentNumberOne, veryDescriptiveArgumentTwo, tableModelEventHandlerProxy, artichokeDescriptorAdapterIterator) { // ... } 関数の呼び出し自体がインデントされている場合、元の文もしくは関数呼び出しの開始位置を基準にスペース4つ分インデントしてかまいません。次の例は全て許容されるスタイルです if (veryLongFunctionNameA( veryLongArgumentName) || veryLongFunctionNameB( veryLongArgumentName)) { veryLongFunctionNameC(veryLongFunctionNameD( veryLongFunctioNameE( veryLongFunctionNameF))); } 無名関数の引渡し 関数呼び出しの引数リスト内で無名関数を宣言する場合、無名関数の内容は、文全体の左端からスペース2つ分、もしくは無名関数の宣言の左端からスペース2つ分インデントします。これは無名関数の内容を読みやすくする（関数全体が画面の右側に圧し潰された状態にならないようにする）ためです。 prefix.something.reallyLongFunctionName( whatever , function(a1, a2) { if (a1.equals(a2)) { someOtherLongFunctionName(a1); } else { andNowForSomethingCompletelyDifferent(a2.parrot); } }); var names = prefix.something.myExcellentMapFunction( verboselyNamedCollectionOfItems, function(item) { return item.name; }); goog.scopeによる別名 Closure Libraryが提供するgoog.scopeを使うと、名前空間を含むシンボルの長い名前を短く置き換えることができます。 goog.scopeの呼び出しは、1ファイルにつき1度だけ、グローバルスコープ内で行います。 呼び出しの開始部分goog.scope(function() {は、goog.provide、goog.require、トップレベルコメントの後に、正確に1行空けてから記述しなければなりません。呼び出しはファイルの最終行で閉じられなければなりません。またこのとき// goog.scopeというコメントを、ステートメント末尾のセミコロンからスペース2つ空けて追記してください。 C++の名前空間と同様に、goog.scopeの配下のコードはインデントしません。各行の先頭から記述を続けます。 作成した別名を、別のオブジェクト（例えば、ほとんどのコンストラクタ、列挙型、名前空間）へ再割り当てしないでください。次のようにしてはいけません（コンストラクタへの別名のつけ方は、下を参照してください） goog.scope(function() { var Button = goog.ui.Button; Button = function() { ... }; ... 別名は、シンボルの完全名の最後の部分と同じでなければなりません。 goog.provide( my.module.SomeType ); goog.require( goog.dom ); goog.require( goog.ui.Button ); goog.scope(function() { var Button = goog.ui.Button; var dom = goog.dom; // コンストラクタ宣言より後に別名化します。 my.module.SomeType = function() { ... }; var SomeType = my.module.SomeType; // いつもどおり、プロトタイプメソッドを宣言します SomeType.prototype.findButton = function() { // 上で別名化したButton this.button = new Button(dom.getElement( my-button )); }; ... }); // goog.scope 行折り返しのインデント 配列リテラルとオブジェクトリテラル、無名関数を除き、行の折り返しは全て 兄弟 の式に対し左揃えでインデントするか、 親 の式に対しスペース4つ（2つではなく）分深くインデントします（ここでいう 兄弟 や 親 は、丸括弧のネストの深さを指します）。 someWonderfulHtml = + getEvenMoreHtml(someReallyInterestingValues, moreValues, evenMoreParams, a duck , true, 72, slightlyMoreMonkeys(0xfff)) + ; thisIsAVeryLongVariableName = hereIsAnEvenLongerOtherFunctionNameThatWillNotFitOnPrevLine(); thisIsAVeryLongVariableName = siblingOne + siblingTwo + siblingThree + siblingFour + siblingFive + siblingSix + siblingSeven + moreSiblingExpressions + allAtTheSameIndentationLevel; thisIsAVeryLongVariableName = operandOne + operandTwo + operandThree + operandFour + operandFive * ( aNestedChildExpression + shouldBeIndentedMore); someValue = this.foo( shortArg, Some really long string arg - this is a pretty common case, actually. , shorty2, this.bar()); if (searchableCollection(allYourStuff).contains(theStuffYouWant) !ambientNotification.isActive() (client.isAmbientSupported() || client.alwaysTryAmbientAnyways())) { ambientNotification.activate(); } 空行 論理的に関連性のあるコードをまとめるため、空行を使ってください。例えば次のようにします doSomethingTo(x); doSomethingElseTo(x); andThen(x); nowDoSomethingWith(y); andNowWith(z); 二項または三項の演算子 演算子は必ず先行する行の側に置きます。それを除くと、改行やインデントは他のGoogleスタイルガイドと同じルールに従います。当初この演算子の配置はセミコロンの自動挿入への配慮から決定されましたが、実際にはセミコロンが二項演算子の前に挿入されることはありません。しかし一貫性を保つため、新しいコードもこのスタイルを守ってください。 var x = a ? b c; // 収まるなら1行にまとめます。 // 4文字分のインデントはOKです。 var y = a ? longButSimpleOperandB longButSimpleOperandC; // 最初のオペランドの位置までインデントするのもOKです。 var z = a ? moreComplicatedB moreComplicatedC; ドット演算子も同じです。 var x = foo.bar(). doSomething(). doSomethingElse(); 丸括弧 必要なときだけ使います。 丸括弧は控えめに、基本的には文法やセマンティクスが求める場合にだけ使います。 delete、typeof、voidのような単項演算子やreturn、throwのようなキーワードの後ろで丸括弧を使ってはいけません（case、in、newで使わないのと同様です）。 文字列 "より を使います。 一貫性の点で、ダブルクォート（"）よりもシングルクォート（ ）の方が好ましいといえます。HTMLを含む文字列を作成する際には、シングルクォートの方が便利です var msg = This is some HTML ; 可視性（privateまたはprotectedなフィールド） JSDocアノテーションの@privateと@protectedの利用を推奨します。 JSDocアノテーションの@privateと@protectedを利用し、クラス、関数、プロパティの可視性を明示することを推奨します。 Compilerのフラグ--jscomp_warning=visibilityを有効にすると、可視性の違反について警告が出力されます。 Closure Compiler Warnings を参照してください。 グローバルな変数や関数に付けられた@privateは、同じファイル内のコードだけがそれらにアクセス可能であることを表します。 @privateが付けられたコンストラクタは、それをインスタンス化できるのが同じファイル内のコードとそれ自身の静的またはインスタンスメンバだけであることを表します。@privateコンストラクタは、同じファイルからであればパブリックで静的なプロパティとしてアクセスできます。またinstanceof演算子もそれらにアクセスできます。 グローバルな変数、関数、コンストラクタに対して@protectedアノテーションは絶対に付けられません。 // ファイル 1 // AA_PrivateClass_ と AA_init_ はグローバルでありかつ同一ファイル内に存在するため、 // 互いにアクセス可能です。 /** * @private * @constructor */ AA_PrivateClass_ = function() { }; /** @private */ function AA_init_() { return new AA_PrivateClass_(); } AA_init_(); @privateなプロパティにアクセス可能なのは、同じファイルに存在する全てのコードと、もしそのプロパティがクラスに属しているのであれば、そのプロパティを"所有"するクラスの全ての静的メソッドとインスタンスメソッドです。それらは別のファイルに存在するサブクラスからはアクセスできず、オーバーライドされることもありません。 @protectedなプロパティにアクセス可能なのは、同じファイルに存在する全てのコードと、そのプロパティを"所有"するクラスとそのサブクラスの全ての静的メソッドとインスタンスメソッドです。 これらのセマンティクスはC++やJavaのそれとは違いがある点に注意してください。例えばアクセス権限は、同じクラスやクラス階層に属するものだけでなく、同じファイル内に存在する全てのコードに与えられています。またC++とは異なり、プライベートなプロパティはサブクラスからオーバーライドできません。 // ファイル 1 /** @constructor */ AA_PublicClass = function() { /** @private */ this.privateProp_ = 2; /** @protected */ this.protectedProp = 4; }; /** @private */ AA_PublicClass.staticPrivateProp_ = 1; /** @protected */ AA_PublicClass.staticProtectedProp = 31; /** @private */ AA_PublicClass.prototype.privateMethod_ = function() {}; /** @protected */ AA_PublicClass.prototype.protectedMethod = function() {}; // ファイル 2 /** * @return {number} 1列に並べたカモの数。 */ AA_PublicClass.prototype.method = function() { // これら2つのプロパティへのアクセスは正当です。 return this.privateProp_ + AA_PublicClass.staticPrivateProp_; }; // ファイル 3 /** * @constructor * @extends {AA_PublicClass} */ AA_SubClass = function() { // protectedな静的プロパティへの正当なアクセス。 AA_PublicClass.staticProtectedProp = this.method(); }; goog.inherits(AA_SubClass, AA_PublicClass); /** * @return {number} 1列に並べたカモの数。 */ AA_SubClass.prototype.method = function() { // protectedなインスタンスプロパティへの正当なアクセス。 return this.protectedProp; }; JavaScriptでは、ある型（AA_PrivateClass_のような）とその型のコンストラクタが区別されないことに注意してください。publicな型とprivateなコンストラクタを両立させる方法はありません。（可視性のチェックを破ってコンストラクタに別名をつけるのは簡単だからです） JavaScriptのデータ型 Compilerによる型の強制を推奨します。 詳細はこちらのページを参照してください。 コメント JSDocを使ってください。 詳細はこちらのページを参照してください。 goog.provideによる依存関係の規定 トップレベルのシンボルだけを規定します。 あるクラスに含まれるメンバ（列挙型や内部クラスなど）は全て、同じファイル内で定義しましょう。こうすると、1つのファイル内でgoog.provideが規定するのは最上位のクラスだけになるはずです。 こうします goog.provide( namespace.MyClass ); こうはしません goog.provide( namespace.MyClass ); goog.provide( namespace.MyClass.Enum ); goog.provide( namespace.MyClass.InnerClass ); goog.provide( namespace.MyClass.TypeDef ); goog.provide( namespace.MyClass.CONSTANT ); goog.provide( namespace.MyClass.staticMethod ); 名前空間のメンバは個々に規定します goog.provide( foo.bar ); goog.provide( foo.bar.method ); goog.provide( foo.bar.CONSTANT ); コンパイル 必須です。 クライアントに配信される全てのコードは、Closure CompilerのようなJSコンパイラによってコンパイルされていなければなりません。 ヒントとテクニック JavaScriptについてもう少しだけ。 論理値表現 以下の値は、論理値の表現としてはすべてfalseです null undefined （空文字） 数値の0 でも気をつけてください。以下の値は全てtrueです 文字列の 0 []（空の配列） {}（空のオブジェクト） 以上から、下のコードを書き換えてみましょう while (x != null) { これはもっと短くできます（ただしxが 0、空文字、falseを取らないことが条件です） while (x) { また、文字列がnullでも空文字でもないことをチェックしたいとします。こうも書けますが if (y != null y != ) { 下の方が短くてもっといいでしょう if (y) { 警告 論理値表現の結果は直感と異なることがよくあります。いくつか例を示します Boolean( 0 ) == true 0 != true 0 != null0 == []0 == false Boolean(null) == falsenull != truenull != false Boolean(undefined) == falseundefined != trueundefined != false Boolean([]) == true[] != true[] == false Boolean({}) == true{} != true{} != false 条件（三項）演算子 (? ) こう書く代わりに if (val) { return foo(); } else { return bar(); } こう書くことができます return val ? foo() bar(); 三項演算子はHTMLを作成するときにも便利です var html = input type="checkbox" + (isChecked ? checked ) + (isEnabled ? disabled ) + name="foo" ; と || これらの二項演算子は短絡演算子です。最後に評価された項目の結果を式全体の評価とします。 ||は「デフォルト」演算子とも呼ばれます。その理由は /** @param {*=} opt_win */ function foo(opt_win) { var win; if (opt_win) { win = opt_win; } else { win = window; } // ... } 上のコードを、こう書き換えられるからです /** @param {*=} opt_win */ function foo(opt_win) { var win = opt_win || window; // ... } もまた、コードを短くするのに役立ちます。例えば下のように書く代わりに if (node) { if (node.kids) { if (node.kids[index]) { foo(node.kids[index]); } } } こうできます if (node node.kids node.kids[index]) { foo(node.kids[index]); } あるいは var kid = node node.kids node.kids[index]; if (kid) { foo(kid); } とはいえ、これは少々やりすぎでしょう node node.kids node.kids[index] foo(node.kids[index]); ノードリストへの反復処理 多くの場合ノードリストはフィルタ付きのイテレータとして実装されています。これは、lengthのようなプロパティを参照するときのオーダーが O(n) であり、反復処理中にlengthを再計算し続けると、そのオーダーは O(n^2) となるということを意味しています。 var paragraphs = document.getElementsByTagName( p ); for (var i = 0; i paragraphs.length; i++) { doSomething(paragraphs[i]); } 上のコードはこう書き換えたほうが優れています var paragraphs = document.getElementsByTagName( p ); for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) { doSomething(paragraph); } 要素が論理値のfalseとして評価される値を持たなければ、上のコードは全てのコレクションや配列で正常に動作します。 あるノードの子ノードに対して反復処理を行う際には、firstChildプロパティとnextSiblingプロパティを使うこともできます var parentNode = document.getElementById( foo ); for (var child = parentNode.firstChild; child; child = child.nextSibling) { doSomething(child); }
https://w.atwiki.jp/handsrecs/pages/40.html
Javascript タグ名の取得 ※prototype.jsを使用 大文字が返ってくる $( タグのid ).tagName; タグの属性値の取得 ※prototype.jsを使用 $( タグのid ).getAttribute( 属性名 ); ※イベント系の属性は上記方保ではIE6は動かない(IEのバグ)ので以下のようにする必要があった $( タグのid ).setAttribute("onfocus", new Function("Element.show( help );")); http //nanto.asablo.jp/blog/2005/10/29/123294 $()で存在しないIDを指定した場合の戻り値 null 関数の可変引数 function hoge() { for (var i = 0; i hoge.arguments.length; i++) { alert(hoge.arguments[i]); } } // 呼び出し元 hoge( aaaa ); hoge( 1 , 2 ); hoge( test1 , test2 , test3 ); http //javascriptist.net/docs/samples_prototype.html http //d.hatena.ne.jp/javascripter/20080501/1209647788 インベントハンドラ2 http //www.rfs.jp/sb/javascript/01/09.html 日付 http //www.hoge256.net/2007/08/64.html
https://w.atwiki.jp/playaholic/pages/25.html
JavaScript 補助的に良く使うモノなど ブラウザの履歴で移動 input type="button" name="名前" value="ボタンに表示する文字" onclick="javascript history.back()"
https://w.atwiki.jp/saicron/pages/73.html
MDN (Mozilla Developper Center) Mozilla Developer Network (MDN) (ja) JavaScript (ja) About JavaScript (ja)JavaScript とは何か? どのような実装がありますか? JavaScript リソース A re-introduction to JavaScript (ja) 「再」紹介 Core JavaScript 1.5 Reference (ja) Core JavaScript 1.5 Guide (ja)About this Guide (ja)JavaScript のバージョン、JavaScript の情報の所在、JavaScript を学ぶ上での Tips JavaScript Scripting ResourcesCurrently, mozilla.org does not host JavaScript scripting specific documentation.
https://w.atwiki.jp/mekagazira/pages/46.html
フォームオブジェクト フォーム（Form） document.forms.elementsプロパティ 概要 特定の部品から値を取り出したり、書き込んだりする場合はオブジェクトの位置を指し示すとき、使用されるのがdocument.forms.elementsプロパティです。 この構成としては、まず、ページ毎にdocumentがあります。ただし、フレームがある場合にはフレーム毎にdocumentがあります。 その中に「フォーム(form)」が含まれています。「フォーム」にはテキストフィールドやボタンなどフォームを構成する部品が含まれていて、これらを「エレメント(element)」と言います。 elements[ ]には要素番号による指定と名前による指定があります。 elements[ ]の要素番号による指定の場合、forms[ ]と同様です。 同じフォームの中で0番から始まりそれぞれの部品が定義されて順に0、１、2、…と割り当てられます。次のフォームの中では改めて0番から始まります。 名前による指定の場合、FORMで指定されたFORM自身の名前を用います。これは文字列なので" "の間に記述しましょう。 要素による指定と名前による指定は混在していても構いません。 例： document.forms[0].elements["tname1"] document.forms["fname0"].elements[0] 使用方法 実際に部品の値を指す場合はdocument.forms[0].elements[0].valueというように記述します。 参考ページ JavaScript オブジェクト名の取得 document.forms.elementsプロパティ
https://w.atwiki.jp/ura-inoue/pages/5.html
javascriptのサンプルやリファレンスはこちらのページで更新をお願いします。 ※注意点 サンプルファイルを投稿したら、説明を書いてあげましょう。 javascriptで新規ページを制作したら、このページに必ずリンクを貼って下さい。 リンクの貼り方 上メニューから編集→ページ編集を選択 リストボタンを押し、リストと表示されたらそのリストを編集する ハイパーリンクのボタンを押し、リンク名とURLを記入 ページ保存のボタンを選択する 以下サンプル＆リファレンス掲載ページ
https://w.atwiki.jp/pspt/pages/245.html
JavaScriptリファレンス入門 言語に関する話題はこちら→JavaScript & jQuery JavaScriptリファレンス入門 リファレンスコメント文 変数に数字を代入する 文字を出力するアラートダイアログ上に表示 ブラウザ上に表示 コンソール上に表示 簡単な計算をするaとbの和を出力する aのb乗を出力する 少し複雑な計算をする 変数の変換文字列を数値に変換する 数値を文字列に変換する 端末から情報を入力するダイアログにYES/NOを入力する ダイアログに文字を入力する フォームに文字を入力する 繰り返し文for文 while文 条件分岐if文 switch文 条件演算子? 配列多次元配列 リファレンス コメント文 // コメント文です。 変数に数字を代入する javascriptではvarのような変数宣言を必ずしもする必要はないがソースの明快さの為に宣言することが推奨される。 var a=1; var b=-1; 文字を出力する 文字列を表示させる場合は (クォーテーション)か"(ダブルクォーテーション)で囲む必要がある。 アラートダイアログ上に表示する際は改行(\n)の利用が可能。 アラートダイアログ上に表示 var a=1; var b=-1; alert(a); alert(b); alert("一行目\n二行目"); ブラウザ上に表示 var a=1; var b=-1; document.write(a+" br "+b+" br test"); コンソール上に表示 var a=1; var b=-1; console.log(a); console.log(b); 簡単な計算をする 足し算 + 引き算 - 掛け算 * 割り算 / 剰余 % 累乗 Math.pow(,) aとbの和を出力する var a=1; var b=-1; var solution=a+b; document.write(solution); aのb乗を出力する var a=1; var b=-1; var solution=Math.pow(a,b); document.write(solution); 少し複雑な計算をする ここでは解の公式を例とする。ただし±のうち+の方のみを再現する。 括弧は()のみ扱える。 平方根を返す関数はMath.sqrt(x)。 var a=1; var b=-1; var c=-1; var x=(-b+Math.sqrt(Math.pow(b,2)-4*a*c))/(2*a); document.write(x); 変数の変換 文字列- 数値 Number(文字列) 数値- 文字列 String(数値) 変数に数字を代入したからと言ってブラウザがそれを数字として認識するとは限らない。変数の型を意識しよう。 文字列を数値に変換する var a= 1 ; var b= -1 ; document.write(a+b); document.write( br ); a=Number(a) b=Number(b) document.write(a+b); 数値を文字列に変換する var a=1; var b=-1; document.write(a+b); document.write( br ); a=String(a) b=String(b) document.write(a+b); 端末から情報を入力する ダイアログに入力する方法とフォームに入力する方法の2つがある。 ダイアログにYES/NOを入力する var a=confirm( これはペンですか？ ); alert(a); ダイアログに文字を入力する var str=prompt( あなたは誰ですか？ , ); alert( 私は +str+ です。 ) フォームに文字を入力する !--HTMLのコード-- form name="js" p あなたは誰ですか？ /p input type="text" value="" input type="button" value="OK" onclick="test()" /form //JavaScriptのコード function test(){ var str=document.js.elements[0].value; alert( 私は +str+ です。 );} 繰り返し文 繰り返し文にはfor文とif文の2つがある。while文はfor文に比べ初期化式や変化式がない。for文は決まった回数だけ繰り返す場合に使われることが多く、while文では繰り返し回数が決まっていない場合などに使われることが多い。 for文 var sum=0; for(i=0;i 5;i++){ sum=sum+1; alert(sum); } while文 var sum=0; var i=0; while(i 5){ i++; sum=sum+1; alert(sum); } 条件分岐 条件分岐にはif文とswitch文の2つがある。一般的な条件分岐ではif文が使われ、分岐が多い場合はswitch文が使われることが多い。また簡単な条件分岐であれば条件演算子?を使ってもよい。 if文 var num=prompt( 正の数を入力すれば合格です。 , ); num=Number(num); if(num 0){ alert( 合格 ); } else{ alert( 不合格 ); } switch文 var num=prompt( 1を入力すれば合格です。 , ); num=Number(num); switch(num){ case 1 alert( 合格 );break; default alert( 不合格 );break; } 条件演算子? var num=prompt( 正の数を入力すれば合格です。 , ); num=Number(num); num 0?alert( 合格 ) alert( 不合格 ); 配列 配列とは添え字付き変数に対応するものである。 対応する添え字が0から始まることに注意。 ここでは出力にfor文を用いた。 var ary=[3,1,4]; for(i=0;i 3;i++){ alert(ary[i]) } 多次元配列 j=0 j=1 j=2 i=0 3 1 4 i=1 2 7 1 i=2 1 3 7 上のi行j列の表を再現する。 列間が連続しないように (空白)を挟んだ。 var ary=[[3,1,4],[2,7,1],[1,3,7]]; for(i=0;i 3;i++){ document.write( p ); for(j=0;j 3;j++){ document.write(ary[i][j]+ nbsp; ); } document.write( /p ); }
https://w.atwiki.jp/pspt/pages/236.html
JavaScript jQuery ご存知でしたか？実はWEB上で動くもの殆どがJavaScriptで記述されているんです。 JavaScript jQuery JavaScriptを学ぶメリットホームページをカスタマイズする ブックマークレットを記述する Windows8のストアアプリを作成する Google Apps Scriptを記述する リファレンスリファレンス 学習方法 (初心者用) jQueryを使いたいならCDNを利用する 参考WEBサイトリファレンス 最適化について 書籍 JavaScriptを学ぶメリット ホームページをカスタマイズする HTML & CSSだけでは難しい動的なWEBページを作成できます。jQueryを利用すればより簡単に動的なWEBページを作成できます。 ブックマークレットを記述する ブックマークレットとはウェブブラウザで簡単な処理を行う簡易的なプログラムです。上手く使いこなせば今よりずっと快適なネットサーフィンを実現できます。 Windows8のストアアプリを作成する Windows8のストアアプリは従来のソフトウェアと異なりWEBページやWEBアプリを組むようにアプリを作成することが可能です。（勿論、従来の方法も通用します） Google Apps Scriptを記述する なんとGoogle Apps ScriptはMS Officeのマクロ機能のGoogle ドキュメント版です。安さしかないフリーのオフィスソフトとは、一線を画します。 リファレンス リファレンス JavaScriptリファレンス入門 JavaScriptリファレンス 学習方法 (初心者用) JavaScriptの記入場所は2つ。 HTMLファイル内 外部のJSファイル 基本的にJavaScriptはHTMLファイル内に記述するものだがCSSがそうであったようにHTMLファイルとは別に外部のJSファイルを用意してそこからHTMLファイルに取り込むことも出来る。（詳しくはHTML & CSS）慣れない初めのうちはJavaScriptをHTMLファイル内に記述することだけに専念しよう。では下のようなhtmlファイル(jstest.html)を作って script タグ内を編集していこう。 html head title jstest /title meta charset="Shift_JIS" /head body script !-- ここを編集する。 -- /script /body /html jQueryを使いたいなら CDNを利用する HTMLのヘッダー内に以下のコードを挿入 script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" /script 参考 WEBサイト リファレンス とほほのJavaScriptリファレンス 最適化について JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法 JavaScriptを高速化する6つのテクニック(マイナビニュース) 書籍